<template>
  <div class="app-container">
    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
  </div>
</template>

<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import { batchEmployee } from '@/api/employee'
import { formatExcelDate } from '@/utils/index'
export default {
  name: 'UploadExcel',
  components: { UploadExcelComponent },
  data() {
    return {
      tableData: [],
      tableHeader: []
    }
  },
  methods: {
  // 上传之前校验方法
    beforeUpload(file) {
      // 校验方法大小
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        // 校验通过返回true
        return true
      }

      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    async handleSuccess({ results, header }) {
      // 可以获取到 表头数组 tableHeader
      // 还有表格数组 tableData
      console.log(results, header)
      // 数据转换
      // 中英文对照关系
      const headerRelation = {
        '入职日期': 'timeOfEntry',
        '姓名': 'username',
        '工号': 'workNumber',
        '手机号': 'mobile',
        '转正日期': 'correctionTime'
      }
      const data = this.getImportData(results, headerRelation)
      // 调用接口
      await batchEmployee(data)
      // 弹窗提醒
      this.$message.success('批量导入员工成功')
    },
    // 转换数据
    getImportData(arr, headerRelation) {
      const resArr = []
      // 将数组 遍历 获取到数组中每一个对象
      arr.forEach(item => {
        const obj = {}
        console.log(item, '数组中的对象')
        // Object,keys(item)可以获取对象所有的键组成的数组
        Object.keys(item).forEach(key => {
          // console.log(key, '键名')
          // console.log(headerRelation[key], '转换后的英文名')
          // 转换后的对象变成了key是英文的值还是之前的值的新对象
          if (headerRelation[key] === 'timeOfEntry' || headerRelation[key] === 'correctionTime') {
            obj[headerRelation[key]] = formatExcelDate(item[key], '-')
          } else {
            obj[headerRelation[key]] = item[key]
          }
        })
        resArr.push(obj)
      })
      console.log(resArr, '转换后的后端能识别的新数组')
      return resArr
    }
  }
}
</script>
